<template>
	<view class="load-main">
		<view class="load-box">
			<!-- 			<image class="logo" src="/static/logo.png"></image> -->
			<view class="load-text">用户登录</view>
			<view class="load-choose">
				<view class="load-choosein">
					<view @tap="phoneclick('username')" class="login-title" :class="{active:loadType ==='username'}">
						账号密码登录</view>
					<view @tap="phoneclick('phone')" class="login-title" :class="{active:loadType ==='phone'}">手机登录
					</view>
				</view>
			</view>
			<view class="load-username" v-if="loadType === 'username'">
				<view class="load-input">
					<input type="text" placeholder-class="load-place" placeholder="请输入账号" v-model="username" />
				</view>
				<view class="load-input">
					<input type="password" placeholder-class="load-place" placeholder="请输入密码" v-model="password" />
				</view>

				<view class="load-input"">
				<input class=" vcodeinput" type="text" placeholder="请输入验证码" placeholder-class="load-place" v-model="vcode" />
				<div class="vcodeimg" v-html="codeUrl" @tap="getCode"></div>

			</view>
		</view>
		<view class="load-phone" v-if="loadType === 'phone'">
			<view class="load-input">
				<input type="text" maxlength="11" placeholder-class="load-place" placeholder="请输入手机号码"
					v-model="phoneNumber" />
			</view>
			<view class="load-input">
				<input class="phone-number" type="text" placeholder-class="load-place" placeholder="请输入验证码"
					v-model="phoneVerityCode" />
				<button class="phone-code" type="default" v-bind:disabled="btndisabled"
					@tap="getPhoneCode()">({{codeTime}})</button>
			</view>

		</view>
		<view class="load-button">
			<button type="primary" class="load-button-style" @tap="checkLogin">登录</button>
		</view>
	</view>

	<!-- 		<view class="text-area">
			<text class="title">{{title}}</text>
			登录
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				password: '',
				username: '',
				vcode: '',
				codeUrl: '',
				loadType: 'username',
				phoneNumber: '',
				phoneVerityCode: '',
				codeTime: '获取验证码',
				btndisabled: false
			}
		},
		onLoad() {
			var username = uni.getStorageSync('username');
			var userphone = uni.getStorageSync('userphone');
				
			if (username && userphone) {
				uni.switchTab({
					url: '/pages/plan/plan'
				})
			}
			this.getCode()
			if (localStorage.getItem('time') > 0) {
				this.getPhoneCode(localStorage.getItem('time'))
			}
		},
		methods: {
			timewait(t = 0) {
				setTimeout(() => {
					if (t >= 0) {
						this.codeTime = t + '秒后点击'
						t--
						// 防止刷新重新开始计时
						localStorage.setItem('time', t)
						this.timewait(t)
					} else {
						this.codeTime = '获取验证码'
						t = 60
						this.btndisabled = false
					}
				}, 1000)
			},
			getPhoneCode(t = 60) {
				// 验证手机号码是否合法,正则表达式
				if (!(/^1[13456789]\d{9}$/).test(this.phoneNumber)) {
					uni.showToast({
						title: '手机号码不合规',
						icon: 'none'
					})
					return
				}
				// 发送到服务器端验证
				uni.request({
					url: `${this.apiUrl}/user/sendmsg`,
					method: 'GET',
					data: {
						phoneNumber: this.phoneNumber
					},
					success: res => {
						if(res.data.code === 404) {
							uni.showToast({
								title: '手机号码不存在'
							})
							return
						}
					},
					fail: () => {},
					complete: () => {}
				})
				console.log(t)
				this.btndisabled = true
				this.timewait(t)
			},
			phoneclick(type) {
				if (type === 'phone') {
					this.loadType = 'phone'
				} else {
					this.loadType = 'username'
				}
			},
			checkLogin() {
				uni.request({
					url: 'http://localhost:3000/api/user/login',
					method: 'POST',
					data: {
						UserName: this.username,
						UserPassword: this.password,
						vcode: this.vcode,  // 图形验证码
						// 增加登录类型和手机号/手机验证码
						loadType: this.loadType,
						UserPhone: this.phoneNumber,
						phoneVerityCode: this.phoneVerityCode,
						
					},
					withCredentials: true,
					success: res => {
						console.log(res)
						if (res.data.code === 200) {
							uni.showToast({
								title: '登录成功',
								icon: 'success'
							});
							uni.setStorageSync('username',res.data.data.UserName + '')	
							uni.setStorageSync('userphone',res.data.data.UserPhone + '')
							// 跳转到每周计划界面，适合tabbar中的页面
							uni.switchTab({
								url: "../plan/plan"
							})
						} else {
							uni.showToast({
								title: '用户名或密码或手机号错误',
								icon: 'loading'
							});
						}
					},
					fail: () => {},
					complete: () => {}
				})
			},
			getCode() {
				uni.request({
					url: 'http://localhost:3000/api/user/captcha',
					method: 'GET',
					withCredentials: true,
					success: res => {
						console.log(res)
						if (res.data.code === 200) {
							this.codeUrl = res.data.result

						} else {}
					},
					fail: () => {},
					complete: () => {}
				})
			}
		}
	}
</script>

<style>
	.active {

		background-color: #007aff;
		color: #FFFFFF;
	}

	.login-title {
		width: 200px;
		text-align: center;
		line-height: 30px;
		height: 30px;
	}

	.phone-code {
		font-size: 12px;
	}

	.phone-number {
		width: 70%;
	}

	.load-username {
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		height: 140px;
	}

	.load-phone {
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		height: 100px;
	}

	.load-choose {
		display: flex;
		justify-content: center;
		margin: 20px;
	}

	.load-choosein {
		display: flex;
		height: 30px;
		width: 90%;
		justify-content: space-between;
	}

	.vcodeimg {
		height: 88px;
		height: 50px;
	}

	.vcodeinput {
		width: 80%;
	}

	.load-main {
		display: flex;
		justify-content: center;
		/* 		background-color: #007AFF; */

	}

	.load-box {
		display: flex;
		width: 90%;
		height: 400px;
		flex-direction: column;
		justify-content: flex-start;
		/* 	background-color: #4CD964; */
	}

	.load-text {
		text-align: center;
		margin-top: 20%;
		font-size: 1.2rem;
	}

	.load-input {
		display: flex;
		border: 1px solid #C0C0C0;
		height: 40px;
		align-items: center;

	}

	.load-place {
		padding-left: 10px;
		font-size: 1rem;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
